﻿<div class="docs-section-source @Class">
    @if (!NoToolbar)
    {
    <div style="display: flex; justify-content: flex-end">
        <div class="docs-content-toolbar">
            @if (!String.IsNullOrEmpty(Title))
            { 
                <MudText Class="pt-4 pb-1">@Title</MudText>
            }
            <div class="flex-grow-1"></div>

            <MudTooltip Text="@TooltipSourceCodeText" Placement="Placement.Top">
                <MudIconButton Icon="@Icons.Material.Filled.Code" OnClick="OnShowCode" />
            </MudTooltip>

            @if (!HideEditOnTryMudBlazor)
            {
                <MudTooltip Text="Edit on TryMudBlazor" Placement="Placement.Top">
                    <MudIconButton Icon="@Icons.Material.Filled.Create" OnClick="EditOnTryMudBlazor" />
                </MudTooltip>
            }

            @if (!String.IsNullOrEmpty(Code))
            {
                <MudTooltip Text="Copy Code" Placement="Placement.Top">
                    <MudIconButton Icon="@Icons.Material.Filled.FileCopy" @onclick="CopyTextToClipboard" />
                </MudTooltip>
            }
            @if (!String.IsNullOrEmpty(GitHubFolderName))
            {
                <MudTooltip Text="View the source on GitHub" Placement="Placement.Top">
                    <MudIconButton Icon="@Icons.Custom.Brands.GitHub" Link="@GitHubSourceCode" Target="_blank" />
                </MudTooltip>
            }
        </div>
    </div>
    }
    <div class="docs-source-code @(ShowCode? "docs-show-code" : "docs-hide-code")">
        @CodeComponent()
    </div>
</div>
